<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画廊</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 960px;
            height: 640px;
            position: relative;
            background-color: aliceblue;
            overflow: hidden;
        }

        .item {
            width: 120px;
            height: 80px;
            position: absolute;
            top: 50%;
            border-radius: 6px;
            background-size: cover;
            background-position: center;
            text-align: center;
            transition: 1s;
        }

        /* 需要将页面1和页面2重叠铺满，初始时显示页面2，
         * 不然向后切换时，由于第一个子元素变成最后一个子元素，动画过程中container将会是空白的。
         */
        .item:nth-child(1), .item:nth-child(2) {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .item:nth-child(3) {
            left: 65%;
        }

        .item:nth-child(4) {
            left: calc(65% + 130px);
        }

        .item:nth-child(5) {
            left: calc(65% + 260px);
        }

        .item:nth-child(n+6) {
            left: calc(65% + 390px);
            opacity: 0;
        }

        .buttons {
            width: 100%;
            position: absolute;
            bottom: 50px;
            display: flex;
            justify-content: center;
            gap: 24px;
        }

        .buttons button {
            width: 104px;
            height: 38px;
            border-radius: 6px;
            color: #fff;
            background-color: rgba(1, 1, 1, 0.1);
            cursor: pointer;
            border: none;
        }

        .buttons button:hover {
            background-color: rgba(1, 1, 1, 0.2);
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="slide">
            <div class="item" style="background-color:darkgreen">页面7</div>
            <div class="item" style="background-color:olive">页面1</div>
            <div class="item" style="background-color:blueviolet;">页面2</div>
            <div class="item" style="background-color:brown;">页面3</div>
            <div class="item" style="background-color:cadetblue;">页面4</div>
            <div class="item" style="background-color:steelblue;">页面5</div>
            <div class="item" style="background-color:bisque;">页面6</div>
        </div>
        <div class="buttons">
            <button type="button" class="left">Prev</button>
            <button type="button" class="right">Next</button>
        </div>
    </div>
    <script>
        const leftBtn = document.querySelector(".buttons .left");
        const rightBtn = document.querySelector(".buttons .right");
        const slide = document.querySelector("#slide");
        let openClick = true // 节流处理 (保证动画执行过程，按钮不被重复点击)
        leftBtn.addEventListener("click", (e) => {
            if (openClick) {
                openClick = false // 触发点击后，禁用按钮
                const items = slide.querySelectorAll(".item")
                slide.prepend(items[items.length - 1])
                setTimeout(() => openClick = true, 1000) // 1s再开放按钮的点击
            }
        })
        rightBtn.addEventListener("click", (e) => {
            if (openClick) {
                openClick = false
                const items = slide.querySelectorAll(".item")
                slide.appendChild(items[0])
                setTimeout(() => openClick = true, 1000)
            }
        })
    </script>
</body>

</html>